<template>
  <div class="workload-list-container">
    <el-card shadow="never" class="full-width-card">
      <!-- 查询条件 -->
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="query-form">
        <div class="query-form-content">
          <div class="query-fields">

            <el-form-item label="需求名称" prop="itemWorkloadName" class="query-item">
              <el-input v-model="queryParams.itemWorkloadName" placeholder="请输入需求名称" clearable class="query-input"
                @change="handleChange" />
            </el-form-item>
            <el-form-item label="创建人" prop="creator" class="query-item">
              <el-select v-model="queryParams.createUserName" placeholder="请选择创建人" clearable filterable
                class="query-input" @change="handleChange">
                <el-option v-for="item in creatorOptions" :key="item.uuid" :label="item.userName" :value="item.uuid" />
              </el-select>
            </el-form-item>

            <el-form-item label="审核人" prop="reviewer" class="query-item">
              <el-select v-model="queryParams.auditUserName" placeholder="请选择审核人" clearable filterable
                class="query-input" @change="handleChange">
                <el-option v-for="item in reviewerOptions" :key="item.uuid" :label="item.userName" :value="item.uuid" />
              </el-select>
            </el-form-item>

            <el-form-item label="时间范围" prop="dateRange" class="query-item">
              <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
                class="query-input date-picker" @change="handleChange" />
            </el-form-item>
          </div>

          <!-- 添加汇报工作量按钮 -->
          <div class="action-buttons">
            <el-button type="primary" @click="openReportWorkloadRequirement" class="action-btn primary-btn">
              <el-icon>
                <Plus />
              </el-icon>
              汇报工作量
            </el-button>
            <el-button type="info" @click="openRequirementListDialog" class="action-btn info-btn">
              <el-icon>
                <List />
              </el-icon>
              需求列表
            </el-button>
            <el-button type="success" @click="exportExcel" class="action-btn success-btn">
              <el-icon>
                <document />
              </el-icon>导出Excel
            </el-button>
          </div>
        </div>
      </el-form>

      <!-- Tab筛选 -->
      <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="full-width-tabs">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="待评估" name="evaluating" />
        <el-tab-pane label="评估通过" name="approved" />
        <el-tab-pane label="评估未通过" name="pending" />
      </el-tabs>

      <!-- 表格 - 使用flex布局和100%宽度 -->
      <div class="table-container">
        <el-table v-loading="loading" :data="workloadList" border style="width: 100%" :header-cell-style="{
          background: '#f8f9fa',
          textAlign: 'center',
          color: '#606266',
          fontWeight: '500',
          fontSize: '14px'
        }" :row-class-name="getRowClassName" :cell-style="getCellStyle" class="enhanced-table">

          <!-- 需求名称列 - 左对齐 -->
          <el-table-column prop="itemWorkloadName" label="需求名称" min-width="380" header-align="left" align="left"
            class="task-name-column" show-overflow-tooltip>
            <template #default="{ row }">
              <div class="task-name-cell">
                <el-icon class="task-icon">
                  <Document />
                </el-icon>
                <span class="task-text">{{ row.itemWorkloadName }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 申报人天数列 -->
          <el-table-column prop="itemRequirementDeclarationDay" label="申报人天数" min-width="120" header-align="center"
            align="center" class="days-column">
            <template #default="{ row }">
              <div class="days-cell">
                <span class="days-number">{{ row.itemRequirementDeclarationDay }}</span>
                <span class="days-unit">人/天</span>
              </div>
            </template>
          </el-table-column>

          <!-- 研发负责人反馈人天数列 -->
          <el-table-column prop="itemRequirementFeedbackDay" label="研发负责人反馈人天数" min-width="180" header-align="center"
            align="center" class="days-column">
            <template #default="{ row }">
              <div class="days-cell">
                <span class="days-number">{{ row.itemRequirementFeedbackDay }}</span>
                <span class="days-unit">人/天</span>
              </div>
            </template>
          </el-table-column>

          <!-- 人天单价列 -->
          <el-table-column prop="itemRequirementPersionDayPrice" label="人天单价" min-width="120" header-align="center"
            align="center" class="price-column">
            <template #default="{ row }">
              <div class="price-cell">
                <span class="price-symbol">¥</span>
                <span class="price-number">{{ row.itemRequirementPersionDayPrice }}</span>
                <span class="price-unit">/人天</span>
              </div>
            </template>
          </el-table-column>

          <!-- 是否参照公司标准工作量表 -->
          <el-table-column prop="itemRequirementReferenceCompanyStandards" label="是否参照公司标准工作量表" min-width="180"
            header-align="center" align="center" class="standard-column">
            <template #default="{ row }">
              <div class="standard-cell">
                <el-tag :type="row.itemRequirementReferenceCompanyStandards === '是' ? 'success' : 'warning'"
                  size="small" class="standard-tag" effect="dark">
                  <el-icon class="tag-icon">
                    <Check v-if="row.itemRequirementReferenceCompanyStandards === '是'" />
                    <Close v-else />
                  </el-icon>
                  {{ row.itemRequirementReferenceCompanyStandards }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <!-- 审核人列 -->
          <el-table-column prop="itemRequirementBossName" label="审核人" min-width="120" header-align="center"
            align="center" class="user-column">
            <template #default="{ row }">
              <div class="user-cell">
                <el-avatar :size="24" class="user-avatar">
                  {{ row.itemRequirementBossName?.charAt(0) || 'U' }}
                </el-avatar>
                <span class="user-name">{{ row.itemRequirementBossName || '--' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 创建人列 -->
          <el-table-column prop="itemWorkloadCreateUserName" label="创建人" min-width="120" header-align="center"
            align="center" class="user-column">
            <template #default="{ row }">
              <div class="user-cell">
                <el-avatar :size="24" class="user-avatar">
                  {{ row.itemWorkloadCreateUserName?.charAt(0) || 'U' }}
                </el-avatar>
                <span class="user-name">{{ row.itemWorkloadCreateUserName || '--' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 评估结果列 -->
          <el-table-column prop="isPass" label="评估结果" width="120" header-align="center" align="center"
            class="status-column">
            <template #default="{ row }">
              <div class="status-cell">
                <el-tag :type="getStatusTagType(row.isPass)" size="small" class="status-tag" effect="dark">
                  <el-icon class="status-icon">
                    <Clock v-if="row.isPass == 1" />
                    <Check v-else-if="row.isPass == 2" />
                    <Close v-else-if="row.isPass == 3" />
                  </el-icon>
                  {{ getStatusText(row.isPass) }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <!-- 创建时间列 -->
          <el-table-column prop="createAt" label="创建时间" width="160" header-align="center" align="center"
            class="time-column">
            <template #default="{ row }">
              <div class="time-cell">
                <el-icon class="time-icon">
                  <Calendar />
                </el-icon>
                <span class="time-text">{{ row.createAt }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 操作列 -->
          <el-table-column label="操作" width="360" fixed="right" header-align="center" align="center"
            class="action-column">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button type="primary" size="small" @click="handleOpenWorkloadInfo(row.ID)"
                  class="action-btn detail-btn">
                  <el-icon>
                    <View />
                  </el-icon>
                  详情
                </el-button>

                <el-button
                  v-if="(row.isPass == 1 || row.isPass == 3) && userStore.userInfo?.nickName === row.itemWorkloadCreateUserName"
                  type="warning" size="small" @click="handleEditAuditWorkload(row.ID)" class="action-btn edit-btn">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                  修改
                </el-button>

                <el-button v-if="row.isPass == 1" type="primary" size="small"
                  @click="openAuditReportWorkloadRequirement(row.ID)" class="action-btn audit-btn">
                  <el-icon>
                    <Check />
                  </el-icon>
                  评估
                </el-button>
                <el-button
                  v-if="row.isPass == 2 && !row.chuangJianDuiChuLiPingYu && userStore.userInfo?.nickName === row.itemWorkloadCreateUserName"
                  type="info" size="small" @click="openCommentRatingDialog(row)" class="action-btn comment-btn">
                  <el-icon>
                    <Star />
                  </el-icon>
                  对处理人评价
                </el-button>
                <el-button v-if="row.isPass == 3 || row.isPass == 2" type="success" size="small"
                  @click="handleViewAuditHistory(row.ID)" class="action-btn history-btn">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  操作记录
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>

  <!-- 工作量弹框 -->
  <el-dialog v-model="dialogWorkloadVisible" :title="isEditMode ? '修改汇报工作量' : '汇报工作量'" width="900" class="edit-dialog"
    top="5vh">
    <el-form class="edit-form" label-position="top" :model="WorkloadForm">
      <!-- 任务名称 -->
      <div class="form-section">
        <div class="section-header">
          <el-icon :size="20" class="section-icon">
            <Document />
          </el-icon>
          <h3 class="section-title">基本信息</h3>
        </div>
        <div class="form-row">
          <el-form-item label="任务名称" class="form-item" required>
            <div class="task-name-input">
              <el-input v-model="WorkloadForm.itemWorkloadName" placeholder="请输入汇报工作量标题" clearable
                :disabled="isEditMode" class="task-input" />
              <el-button type="primary" size="default" @click="openRequirementDialog" :disabled="isEditMode"
                class="select-btn">
                <el-icon>
                  <List />
                </el-icon>
                选择需求
              </el-button>
            </div>
          </el-form-item>
        </div>

        <!-- 审核人下拉列表（仅在新增时显示） -->
        <div class="form-row" v-if="showAuditorSelect">
          <el-form-item label="审核人" class="form-item" required>
            <el-select v-model="WorkloadForm.itemRequirementBossUUID" placeholder="选择审核人" filterable clearable
              @change="handleSelectBoss" class="full-width-select">
              <el-option v-for="item in UserSelect" :key="item.uuid" :label="item.nickName" :value="item.uuid" />
            </el-select>
          </el-form-item>
        </div>
      </div>

      <!-- 工作量信息 -->
      <div class="form-section">
        <div class="section-header">
          <el-icon :size="20" class="section-icon">
            <Timer />
          </el-icon>
          <h3 class="section-title">工作量信息</h3>
        </div>
        <div class="form-grid">
          <div class="form-row">
            <el-form-item label="研发负责人反馈人天数" class="form-item" required>
              <el-input-number v-model="WorkloadForm.itemRequirementFeedbackDay" :controls="false" :precision="1"
                :min="0" class="full-width-input">
                <template #suffix>人/天</template>
              </el-input-number>
            </el-form-item>
          </div>

          <div class="form-row">
            <el-form-item label="申报人天数" class="form-item" required>
              <el-input-number v-model="WorkloadForm.itemRequirementDeclarationDay" :controls="false" :precision="1"
                :min="0" class="full-width-input">
                <template #suffix>人/天</template>
              </el-input-number>
            </el-form-item>
          </div>

          <div class="form-row">
            <el-form-item label="人天单价" class="form-item" required>
              <el-input-number v-model="WorkloadForm.itemRequirementPersionDayPrice" :controls="false" :precision="1"
                :min="0.0" class="full-width-input">
                <template #suffix>人/天</template>
              </el-input-number>
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- 参考标准 -->
      <div class="form-section">
        <div class="section-header">
          <el-icon :size="20" class="section-icon">
            <Check />
          </el-icon>
          <h3 class="section-title">参考标准</h3>
        </div>
        <div class="form-row">
          <el-form-item label="是否参照公司标准工作量表" class="form-item" required>
            <div class="switch-container">
              <div class="switch-wrapper">
                <el-switch v-model="WorkloadForm.itemRequirementReferenceCompanyStandards" inline-prompt active-text="是"
                  inactive-text="否" active-value="是" inactive-value="否" class="custom-switch" size="large" />
                <div class="switch-status">
                  <span class="status-text"
                    :class="{ 'active': WorkloadForm.itemRequirementReferenceCompanyStandards === '是' }">
                    {{ WorkloadForm.itemRequirementReferenceCompanyStandards === '是' ? '参照' : '未参照' }}
                  </span>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>
      </div>

      <!-- 描述信息 -->
      <div class="form-section">
        <div class="section-header">
          <el-icon :size="20" class="section-icon">
            <EditPen />
          </el-icon>
          <h3 class="section-title">描述信息</h3>
        </div>
        <div class="form-row">
          <el-form-item label="申报内容详情描述" class="form-item" required>
            <el-input type="textarea" rows="10" maxlength="200" show-word-limit
              v-model="WorkloadForm.itemRequirementApplicationDescription" placeholder="请详细描述申报内容"
              class="full-width-textarea" />
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="不满实际研发工作量15倍理由说明" class="form-item">
            <el-input type="textarea" rows="4" maxlength="200" show-word-limit
              v-model="WorkloadForm.itemRequirementDescription" placeholder="请说明理由" class="full-width-textarea" />
          </el-form-item>
        </div>
      </div>



      <!-- 文件上传 -->
      <div class="form-section">
        <div class="section-header">
          <el-icon :size="20" class="section-icon">
            <FolderAdd />
          </el-icon>
          <h3 class="section-title">材料文件</h3>
        </div>
        <div class="form-row">
          <el-form-item label="材料文件" class="form-item" required>
            <el-upload v-model:file-list="fileList" class="upload-area" action="" multiple :http-request="handleUpLoad"
              :on-success="handleSuccess" :on-error="handleError" :on-remove="handleRemove">
              <div class="upload-content">
                <el-icon :size="40" class="upload-icon">
                  <Upload />
                </el-icon>
                <div class="upload-text">
                  <p class="upload-title">点击或拖拽文件到此处上传</p>
                  <p class="upload-hint">支持PDF、Word、Excel、图片等格式</p>
                </div>
              </div>
              <template #tip>
                <div class="upload-tip">
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
                  已上传 {{ fileList.length }} 个文件
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="form-footer">
        <el-button @click="closeReportWorkloadRequirement" class="cancel-btn">
          <el-icon>
            <Close />
          </el-icon>
          取消
        </el-button>
        <el-button type="primary" @click="handleSubmitWorkloadFormClick" class="submit-btn">
          <el-icon>
            <Check />
          </el-icon>
          {{ isEditMode ? '保存修改' : '提交' }}
        </el-button>
      </div>
    </el-form>
  </el-dialog>



  <!-- 审核需求汇报工作量弹框 -->
  <el-dialog v-model="dialogAuditWorkloadVisible" title="审核汇报工作量" width="800" class="audit-dialog"
    @close="closeAuditReportWorkloadRequirement" @closed="closeAuditReportWorkloadRequirement">
    <el-form class="audit-form" label-position="top" :model="WorkloadForm">
      <div class="audit-form-grid">
        <!-- 第一行：基本信息 -->
        <div class="audit-form-row">
          <el-form-item label="研发负责人反馈人天数" class="audit-form-item">
            <el-input-number v-model="WorkloadForm.itemRequirementFeedbackDay" disabled :controls="false" :precision="1"
              :min="0">
              <template #suffix>人/天</template>
            </el-input-number>
          </el-form-item>

          <el-form-item label="申报人天数" class="audit-form-item">
            <el-input-number v-model="WorkloadForm.itemRequirementDeclarationDay" disabled :controls="false"
              :precision="1" :min="0">
              <template #suffix>人/天</template>
            </el-input-number>
          </el-form-item>

          <el-form-item label="人天单价" class="audit-form-item">
            <el-input-number v-model="WorkloadForm.itemRequirementPersionDayPrice" disabled :controls="false"
              :precision="1" :min="0.0">
              <template #suffix>人/天</template>
            </el-input-number>
          </el-form-item>
        </div>

        <!-- 第二行：参考标准 -->
        <div class="audit-form-row">
          <el-form-item label="是否参照公司标准工作量表" class="audit-form-item">
            <el-switch v-model="WorkloadForm.itemRequirementReferenceCompanyStandards" inline-prompt active-text="是"
              inactive-text="否" active-value="是" inactive-value="否" disabled />
          </el-form-item>
        </div>

        <!-- 第三行：描述信息 -->
        <div class="audit-form-row">
          <el-form-item label="申报内容详情描述" class="audit-form-item full-width">
            <el-input type="textarea" rows="10" v-model="WorkloadForm.itemRequirementApplicationDescription" disabled />
          </el-form-item>
        </div>

        <!-- 第四行：材料文件 -->
        <div class="audit-form-row">
          <el-form-item label="已上传材料" class="audit-form-item full-width">
            <div class="file-list">
              <div v-for="(path, index) in handleFileNameList(WorkloadForm.itemRequirementMaterialPaths)" :key="index"
                class="file-item" @click="handleDownloadFile(handleFileName(path), baseUrl)">
                <el-icon :size="16" class="file-icon">
                  <Document />
                </el-icon>
                <span class="file-name">{{ handleFileName(path).fileName }}</span>
              </div>
            </div>
          </el-form-item>
        </div>

        <!-- 第五行：审核选项 -->
        <div class="audit-form-row">
          <el-form-item label="审核结果" class="audit-form-item full-width">
            <el-radio-group v-model="isNext" class="audit-radio-group">
              <el-radio :label="2" class="audit-radio">通过</el-radio>
              <el-radio :label="3" class="audit-radio">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- 处理人评价 - 仅当审核通过时显示 -->
        <template v-if="isNext === 2">
          <div class="audit-form-grid">
            <div class="audit-form-row">
              <div class="audit-form-row">
                <el-form-item label="自评分配比(%)" class="audit-form-item" required>
                  <el-input-number v-model="WorkloadForm.chuLiRenZiPingFenPeiBi" :min="0" :max="100" :precision="0"
                    :controls="false" style="width: 100%" />
                </el-form-item>
              </div>
              <div class="audit-form-row">
                <el-form-item label="对创建人评分(0-100分)" class="audit-form-item" required>
                  <el-input-number v-model="WorkloadForm.chuLiDuiChuangJianPingFen" :min="0" :max="100"
                    :controls="false" style="width: 100%" />
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="audit-form-row">
            <el-form-item label="对创建人评语" class="audit-form-item full-width" required>
              <el-input type="textarea" rows="3" v-model="WorkloadForm.chuLiDuiChuangJianPingYu"
                placeholder="请输入对创建人的评语" />
            </el-form-item>
          </div>
        </template>

        <!-- 根据审核结果显示不同内容 -->
        <template v-if="isNext === 2">
          <div class="audit-form-row">
            <el-form-item label="经审核后人天数" class="audit-form-item" required>
              <el-input-number v-model="WorkloadForm.itemRequirementAuditAfterDay" :controls="false" :precision="1"
                :min="0.0">
                <template #suffix>人/天</template>
              </el-input-number>
            </el-form-item>
          </div>
        </template>

        <template v-if="isNext === 3">
          <div class="audit-form-row">
            <el-form-item label="不通过原因" class="audit-form-item full-width" required>
              <el-input type="textarea" rows="3" v-model="WorkloadForm.notIsNextMsg" placeholder="请详细说明不通过的原因" />
            </el-form-item>
          </div>
        </template>
      </div>

      <!-- 底部按钮 -->
      <div class="dialog-footer">
        <el-button @click="closeAuditReportWorkloadRequirement">取消</el-button>
        <el-button type="primary" @click="handleAuditWorkloadRequirementClick">确定</el-button>
      </div>
    </el-form>
  </el-dialog>


  <!-- 审核不通过历史记录模态框 -->
  <el-dialog v-model="auditHistoryVisible" title="操作历史记录" width="800" :close-on-click-modal="false" top="5vh">
    <p v-if="auditHistoryList.length == 0" style="min-height: 200px; padding: 10px; color: #909399;">暂无数据</p>
    <el-timeline v-if="auditHistoryList.length > 0" class="timeline-box">
      <el-timeline-item v-for="(item, index) in auditHistoryList" :key="index" :timestamp="item.createAt"
        placement="top" :color="index == 0 ? '#409EFF' : ''">
        <el-card>
          <h4>操作人：{{ item.itemWorkloadCreateUserName }}</h4>
          <p>操作：{{ item.notIsNextMsg }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>


  <!-- 查看评估详情 -->
  <el-dialog v-model="dialogViewWorkloadInfoVisible" title="工作量评估详情" width="900" class="detail-dialog" top="5vh">
    <div class="detail-container">
      <!-- 基本信息区域 -->
      <div class="detail-section">
        <div class="detail-section-header">
          <el-icon :size="20" class="section-icon">
            <InfoFilled />
          </el-icon>
          <h3 class="detail-section-title">基本信息</h3>
        </div>
        <div class="detail-grid">
          <div class="detail-item">
            <span class="detail-label">审核人：</span>
            <span class="detail-value">{{ isWorkloadInfo.itemRequirementBossName || '--' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">更新时间：</span>
            <span class="detail-value">{{ isWorkloadInfo.UpdatedAt || '--' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">研发负责人反馈人天数：</span>
            <span class="detail-value highlight-value">{{ isWorkloadInfo.itemRequirementFeedbackDay || '--' }}
              人/天</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">申报人天数：</span>
            <span class="detail-value highlight-value">{{ isWorkloadInfo.itemRequirementDeclarationDay || '--' }}
              人/天</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">人天单价：</span>
            <span class="detail-value highlight-value">{{ isWorkloadInfo.itemRequirementPersionDayPrice || '--' }}
              人/天</span>
          </div>
          <div class="detail-item full-width">
            <span class="detail-label">是否参照公司标准工作量表：</span>
            <el-tag :type="isWorkloadInfo.itemRequirementReferenceCompanyStandards === '是' ? 'success' : 'warning'"
              size="large">
              {{ isWorkloadInfo.itemRequirementReferenceCompanyStandards || '--' }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 描述信息区域 -->
      <div class="detail-section">
        <div class="detail-section-header">
          <el-icon :size="20" class="section-icon">
            <Document />
          </el-icon>
          <h3 class="detail-section-title">申报内容详情描述</h3>
        </div>
        <div class="detail-content-box">
          <div class="content-text">{{ isWorkloadInfo.itemRequirementApplicationDescription || '无' }}</div>
        </div>
      </div>

      <!-- 审核信息区域 -->
      <template
        v-if="isWorkloadInfo.itemRequirementAuditAfterDay || isWorkloadInfo.itemRequirementDescription || isWorkloadInfo.itemRequirementWorkloadMsg">
        <div class="detail-section">
          <div class="detail-section-header">
            <el-icon :size="20" class="section-icon">
              <Check />
            </el-icon>
            <h3 class="detail-section-title">审核信息</h3>
          </div>
          <div class="detail-grid">
            <div class="detail-item" v-if="isWorkloadInfo.itemRequirementAuditAfterDay">
              <span class="detail-label">经审核后人天数：</span>
              <span class="detail-value success-value">{{ isWorkloadInfo.itemRequirementAuditAfterDay }} 人/天</span>
            </div>
            <div class="detail-item full-width" v-if="isWorkloadInfo.itemRequirementDescription">
              <span class="detail-label">不满实际研发工作量15倍理由说明：</span>
              <div class="detail-content-box">
                <div class="content-text">{{ isWorkloadInfo.itemRequirementDescription }}</div>
              </div>
            </div>
            <div class="detail-item full-width" v-if="isWorkloadInfo.itemRequirementWorkloadMsg">
              <span class="detail-label">不通过信息：</span>
              <div class="detail-content-box error-box">
                <div class="content-text">{{ isWorkloadInfo.itemRequirementWorkloadMsg }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 材料文件区域 -->
      <div class="detail-section">
        <div class="detail-section-header">
          <el-icon :size="20" class="section-icon">
            <Folder />
          </el-icon>
          <h3 class="detail-section-title">材料文件</h3>
        </div>
        <div class="file-list" v-if="isWorkloadInfo.itemRequirementMaterialPaths !== ''">
          <div class="file-item"
            v-for="(path, index) in handleFileNameList(isWorkloadInfo.itemRequirementMaterialPaths)" :key="index"
            @click="handleDownloadFile(handleFileName(path), baseUrl)">
            <el-icon :size="18" class="file-icon">
              <Document />
            </el-icon>
            <span class="file-name">{{ handleFileName(path).fileName }}</span>
            <el-icon :size="16" class="download-icon">
              <Download />
            </el-icon>
          </div>
        </div>
        <div class="empty-file" v-else>
          <el-icon :size="24" class="empty-icon">
            <FolderDelete />
          </el-icon>
          <span class="empty-text">暂无材料文件</span>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="detail-footer">
        <el-button type="primary" @click="dialogViewWorkloadInfoVisible = false" class="close-btn">
          <el-icon>
            <Close />
          </el-icon>
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>



  <!-- 需求选择对话框 -->
  <el-dialog v-model="requirementDialogVisible" title="选择需求" width="60%" append-to-body>
    <div style="margin-bottom: 20px;">
      <el-input v-model="requirementSearchQuery" placeholder="输入需求名称进行搜索" clearable @clear="clearRequirementSearch"
        @keyup.enter="searchRequirements" style="width: 300px;" />
    </div>
    <el-table :data="filteredRequirements" highlight-current-row @current-change="handleRequirementSelect"
      style="width: 100%" max-height="500" border stripe>
      <el-table-column prop="requirementName" label="需求名称" />
      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="handleNoWorkload(row.id)">不汇报工作量</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; text-align: right;">
      <el-button @click="requirementDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmRequirementSelection">确认选择</el-button>
    </div>
  </el-dialog>

  <!-- 需求列表模态框 -->
  <el-dialog v-model="requirementListDialogVisible" title="需求列表" width="80%" append-to-body
    class="requirement-list-dialog">
    <!-- 顶部工具栏：过滤 + 搜索 -->
    <div class="requirement-toolbar">
      <el-radio-group v-model="requirementListFilter" @change="handleRequirementListFilterChange">
        <el-radio :label="1">全部</el-radio>
        <el-radio :label="2">自己</el-radio>
      </el-radio-group>
      <el-input v-model="requirementListKeyword" placeholder="输入需求名称按回车搜索" clearable @clear="fetchRequirementListData"
        @keyup.enter="fetchRequirementListData" class="toolbar-search" />
    </div>

    <!-- 需求列表表格 -->
    <el-table :data="requirementListData" v-loading="requirementListLoading" class="requirement-table"
      highlight-current-row style="width: 100%" max-height="500" border stripe>
      <el-table-column prop="requirementName" label="需求名称" min-width="420" show-overflow-tooltip />
      <el-table-column prop="createAt" label="创建时间" width="180" align="center" />
      <el-table-column v-if="requirementListFilter === 2" label="操作" width="280" align="center" fixed="right">
        <template #default="{ row }">
          <div class="op-btns">
            <el-button type="primary" size="small" @click="handleReportWorkloadFromList(row)">汇报工作量</el-button>
            <el-button type="danger" size="small" @click="handleNoWorkloadFromList(row.id)">不汇报工作量</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 20px; text-align: right;">
      <el-button @click="requirementListDialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>

  <!-- 处理人评价模态框 -->
  <el-dialog v-model="commentRatingDialogVisible" title="处理人评价" width="600" class="comment-rating-dialog" top="5vh">
    <el-form class="comment-rating-form" label-position="top" :model="commentRatingForm">
      <div class="form-section">
        <div class="section-header">
          <el-icon :size="20" class="section-icon">
            <Star />
          </el-icon>
          <h3 class="section-title">评价信息</h3>
        </div>
        <div class="form-grid">
          <div class="form-row">
            <el-form-item label="项目对处理人评分配比(%)" class="form-item" required>
              <el-input-number v-model="commentRatingForm.xiangMuDuiChuLi" :min="0" :max="100" :precision="0"
                :controls="false" class="full-width-input" />
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="对处理人评分(0-100分)" class="form-item" required>
              <el-input-number v-model="commentRatingForm.chuangJianDuiChuLiPingFen" :min="0" :max="100" :precision="0"
                :controls="false" class="full-width-input" />
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="对处理人评语" class="form-item" required>
              <el-input type="textarea" rows="4" maxlength="200" show-word-limit
                v-model="commentRatingForm.chuangJianDuiChuLiPingYu" placeholder="请填写对处理人的评语"
                class="full-width-textarea" />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeCommentRatingDialog">取消</el-button>
        <el-button type="primary" @click="submitCommentRating">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, FormInstance, ElMessageBox } from "element-plus";
import { Plus, List, Document } from '@element-plus/icons-vue'
import useUserStore from "@/store/modules/user";
import {
  GetWorkloadList, //获取汇报工作量列表
  GetManagerList,//获取所有项目经理
  GetRoleUsers,
  GetWorkloadRequirementList,
  NoWorkload,//不汇报工作量
  PostUpdateWorkload,//更新汇报工作量内容
  PostSubmitWorkloadForm,
  GetWorkloadRequirement,//获取审核工作量详情
  PostAuditWorkloadRequirement,//审核上报工作量
  GetWorkloadRequirementMsg,
  ExportWorkloadList,//导出汇报工作量
  PostCommentRating,//给项目经理管理者评分评论
} from "@/api/newDemands/index";
import { handleFileNameList, handleFileName, handleDownloadFile } from "@/utils/utils";
import { postUploadFile } from "@/api/common/index";

const baseUrl = ref("");
const userStore = useUserStore();

// 打开新增工作量弹框
const WorkloadForm = ref<any>({
  itemRequirementId: 0,
  itemWorkloadId: 0,
  itemWorkloadName: '',
  itemRequirementBossUUID: '',
  itemRequirementFeedbackDay: null,
  itemRequirementDeclarationDay: null,
  itemRequirementPersionDayPrice: null,
  itemRequirementReferenceCompanyStandards: "是",
  itemRequirementApplicationDescription: null,
  itemRequirementAuditAfterDay: null, // 新增字段：经审核后人天数
  itemRequirementDescription: null, // 新增字段：不满实际研发工作量15倍理由说明
  notIsNextMsg: null, // 新增字段：不通过信息
  itemRequirementMaterialPaths: null,// 材料文件
  chuLiRenZiPingFenPeiBi: null, // 自评分配比
  chuLiDuiChuangJianPingFen: null, // 对创建人评分
  chuLiDuiChuangJianPingYu: null, // 对创建人评语
});
const requirementSearchQuery = ref('')
const dialogWorkloadVisible = ref(false);//汇报工作量弹框
const isEditMode = ref(false); // 控制是新增还是修改
const UserSelect = ref<any[]>([]); // 审核人列表
const showAuditorSelect = ref(false); // 控制是否显示审核人下拉列表

// 需求列表相关变量
const requirementListDialogVisible = ref(false) // 需求列表模态框显示状态
const requirementListFilter = ref(2) // 过滤条件：1-全部，2-自己，默认选择"自己"
const requirementListData = ref<any[]>([]) // 需求列表数据
const requirementListKeyword = ref('') // 需求列表搜索关键字
const requirementListLoading = ref(false) // 需求列表加载状态

// 处理人评价相关变量
const commentRatingDialogVisible = ref(false) // 处理人评价模态框显示状态
const commentRatingForm = ref({
  itemWorkloadId: 0,
  xiangMuDuiChuLi: 100,
  chuangJianDuiChuLiPingFen: 0,
  chuangJianDuiChuLiPingYu: ''
}) // 处理人评价表单数据
const openReportWorkloadRequirement = async () => {
  isEditMode.value = false; // 设置为新增模式
  showAuditorSelect.value = true; // 显示审核人下拉列表
  WorkloadForm.value = {
    itemWorkloadId: 0,
    itemRequirementBossName: null,
    itemRequirementBossUUID: null,
    itemRequirementFeedbackDay: null,
    itemRequirementDeclarationDay: null,
    itemRequirementPersionDayPrice: null,
    itemRequirementReferenceCompanyStandards: "是",
    itemRequirementApplicationDescription: null,
    itemRequirementMaterialPaths: null,
  };
  dialogWorkloadVisible.value = true;

  // 获取审核人列表
  const { data } = await GetRoleUsers(333);
  if (data.code === 200) {
    UserSelect.value = data.data;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// 关闭工作量弹框
const fileList = ref([]);// 上传文件回显
const requirementDialogVisible = ref(false)
const filePaths = ref([]);//所有上传文件响应地址
const closeReportWorkloadRequirement = () => {
  dialogWorkloadVisible.value = false;
  isEditMode.value = false; // 重置为新增模式
  showAuditorSelect.value = false; // 重置审核人下拉列表显示状态
  fileList.value = [];
  filePaths.value = [];
  WorkloadForm.value = {
    id: null,
    itemRequirementBossName: null,
    itemRequirementBossUUID: null,
    itemRequirementFeedbackDay: null,
    itemRequirementDeclarationDay: null,
    itemRequirementPersionDayPrice: null,
    itemRequirementReferenceCompanyStandards: "是",
    itemRequirementApplicationDescription: null,
    itemRequirementMaterialPaths: null,
  };
};

const handleSuccess = (v: any) => {
  if (v.data.data && v.data.data.resultFilePath) {
    // @ts-ignore
    filePaths.value.push(v.data.data);
  }
};

const handleError = (err: any) => {
  ElMessage.error(err);
};

const handleRemove = (v: any) => {
  fileList.value = fileList.value.filter((item: any) => item.name !== v.name);
  filePaths.value = filePaths.value.filter((path: any) => path.fileName !== v.name);
};

// 打开需求选择对话框
const openRequirementDialog = async () => {
  requirementDialogVisible.value = true
  await fetchRequirements()
}

const handleSelectBoss = (uuid: string) => {
  if (!UserSelect.value || UserSelect.value.length === 0) {
    ElMessage.warning("审核人列表未加载，请稍后重试");
    return;
  }

  const selectedBoss = UserSelect.value.find((item) => item.uuid === uuid);
  if (selectedBoss) {
    WorkloadForm.value.itemRequirementBossName = selectedBoss.nickName;
    WorkloadForm.value.itemRequirementBossUUID = selectedBoss.uuid;
  }
};



// 打开审核汇报工作量弹框
const dialogAuditWorkloadVisible = ref(false);//汇报工作量弹框
const openAuditReportWorkloadRequirement = async (id: number) => {

  loading.value = true;
  const { data } = await GetWorkloadRequirement(id)
  if (data.code === 200) {
    // 初始化表单数据
    WorkloadForm.value = {
      id: id,
      itemRequirementFeedbackDay: data.data.itemRequirementFeedbackDay,
      itemRequirementDeclarationDay: data.data.itemRequirementDeclarationDay,
      itemRequirementPersionDayPrice: data.data.itemRequirementPersionDayPrice,
      itemRequirementReferenceCompanyStandards: data.data.itemRequirementReferenceCompanyStandards,
      itemRequirementApplicationDescription: data.data.itemRequirementApplicationDescription,
      itemRequirementMaterialPaths: data.data.itemRequirementMaterialPaths,
    };
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }

  // 打开弹窗
  dialogAuditWorkloadVisible.value = true;

};

// 打开修改工作量弹框
const handleEditAuditWorkload = async (id: number) => {
  isEditMode.value = true; // 设置为修改模式
  showAuditorSelect.value = false; // 隐藏审核人下拉列表
  try {
    // 调用接口获取审核数据
    const { data } = await GetWorkloadRequirement(id);
    if (data.code === 200 && data.data) {
      // 回显数据
      WorkloadForm.value = {
        itemRequirementId: data.data.itemRequirementId,
        itemWorkloadId: data.data.ID, // 设置 ID
        itemWorkloadName: data.data.itemWorkloadName,
        itemRequirementBossName: data.data.itemRequirementBossName,
        itemRequirementBossUUID: data.data.itemRequirementBossUUID,
        itemRequirementFeedbackDay: data.data.itemRequirementFeedbackDay,
        itemRequirementDeclarationDay: data.data.itemRequirementDeclarationDay,
        itemRequirementPersionDayPrice: data.data.itemRequirementPersionDayPrice,
        itemRequirementReferenceCompanyStandards: data.data.itemRequirementReferenceCompanyStandards,
        itemRequirementApplicationDescription: data.data.itemRequirementApplicationDescription,
        itemRequirementDescription: data.data.itemRequirementDescription,
        itemRequirementMaterialPaths: data.data.itemRequirementMaterialPaths,
      };
      if (data.data.itemRequirementMaterialPaths != '') {
        const paths = data.data.itemRequirementMaterialPaths.split('|')
        fileList.value = paths.map((path: any) => ({
          uid: Math.random().toString(36).substring(2, 9), // 生成唯一ID
          name: path.split('/').pop().split('_').pop(), // 从路径提取文件名
          url: path, // 完整路径
          status: 'success' // 标记为已上传成功
        }));
      }
      dialogWorkloadVisible.value = true; // 打开弹窗
    } else {
      ElMessage.error(data.msg || '获取审核数据失败');
    }
  } catch (error) {
    ElMessage.error('获取审核数据失败，请检查网络或联系管理员');
    console.error('获取审核数据失败:', error);
  }
};

// 查看评估详情
const dialogViewWorkloadInfoVisible = ref(false);// 评估详情弹窗
const isWorkloadInfo = ref<any>({});// 当前评估详情数据
const handleOpenWorkloadInfo = async (id: number) => {
  try {
    const { data } = await GetWorkloadRequirement(id);
    if (data.code === 200 && data.data) {
      isWorkloadInfo.value = data.data;
      dialogViewWorkloadInfoVisible.value = true;
    } else {
      ElMessage.error(data.msg);
      return;
    }
  } catch (error) {
    ElMessage.error('获取审核历史记录失败，请检查网络或联系管理员');
    throw console.error('获取审核历史记录失败:', error);

  }
};

// 新增方法：查看审核不通过历史记录
const auditHistoryList = ref<any[]>([]); // 存储审核不通过历史记录
const auditHistoryVisible = ref(false); // 控制模态框显示与隐藏
const handleViewAuditHistory = async (id: number) => {
  try {
    const { data } = await GetWorkloadRequirementMsg(id);
    if (data.code === 200 && data.data) {
      auditHistoryList.value = data.data; // 存储历史记录
      auditHistoryVisible.value = true; // 显示模态框
    } else {
      ElMessage.error(data.msg || '获取审核历史记录失败');
    }
  } catch (error) {
    ElMessage.error('获取审核历史记录失败，请检查网络或联系管理员');
    console.error('获取审核历史记录失败:', error);
  }
};



// 导出汇报材料
const exportExcel = async () => {
  try {
    const params = {
      ...queryParams,
      // 添加时间处理逻辑
      beginTime: queryParams.dateRange?.[0] ? `${queryParams.dateRange[0]} 00:00:00` : undefined,
      endTime: queryParams.dateRange?.[1] ? `${queryParams.dateRange[1]} 23:59:59` : undefined,
    }
    // 删除dateRange属性，避免传给后端
    delete params.dateRange

    const response = await ExportWorkloadList(params);

    // 检查是否是错误响应（JSON格式）
    if (typeof response === 'object' && 'code' in response && response.code == 7) {
      ElMessage.error(response.msg);
      return;
    }

    // 如果是Blob类型（Excel文件）
    if (response instanceof Blob) {
      // 创建下载链接
      const url = window.URL.createObjectURL(response);
      const link = document.createElement('a');
      link.href = url;
      let fileName = '工作量.xlsx'; // 默认文件名
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      // 清理
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    }
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出失败，请稍后重试');
  }
}

// 获取需求列表
const requirements = ref() // 获取的需求列表
const fetchRequirements = async () => {
  try {
    // 替换为实际的API调用
    const { data } = await GetWorkloadRequirementList()
    if (data.code == 200) {
      requirements.value = data.data
    } else {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    console.error('获取需求列表失败:', error)
    ElMessage.error('获取需求列表失败')
  }
}

// TODO 自定义上传文件
const handleUpLoad = async (options: any) => {
  await postUploadFile(options.file, "workloadPath", "7").then(res => {
    options.onSuccess(res);
  }).catch(error => {
    options.onError(error);
  })
};


// 审核工作量
const handleAuditWorkloadRequirementClick = async () => {
  // WorkloadForm.value.itemRequirementMaterialPaths = filePaths.value;
  if (filePaths.value.length !== 0) {
    const workPaths = filePaths.value.map((path: any) => path.resultFilePath)
    WorkloadForm.value.itemRequirementMaterialPaths = workPaths.join('|');
  }

  const submitData = {
    id: WorkloadForm.value.id,
    isNext: isNext.value,
    itemRequirementAuditAfterDay: isNext.value === 2 ? String(WorkloadForm.value.itemRequirementAuditAfterDay) : null,
    notIsNextMsg: isNext.value === 3 ? WorkloadForm.value.notIsNextMsg : null,
    chuLiRenZiPingFenPeiBi: WorkloadForm.value.chuLiRenZiPingFenPeiBi,
    chuLiDuiChuangJianPingFen: WorkloadForm.value.chuLiDuiChuangJianPingFen,
    chuLiDuiChuangJianPingYu: WorkloadForm.value.chuLiDuiChuangJianPingYu
  };

  if (submitData.id == null) {
    ElMessage.error("请填写所有必填项！");
    return;
  }

  // 评估通过时的必填验证
  if (submitData.isNext == 2) {
    if (!WorkloadForm.value.itemRequirementAuditAfterDay || WorkloadForm.value.itemRequirementAuditAfterDay <= 0) {
      ElMessage.error("请填写经审核后人天数！");
      return;
    }
    if (!WorkloadForm.value.chuLiRenZiPingFenPeiBi || WorkloadForm.value.chuLiRenZiPingFenPeiBi <= 0) {
      ElMessage.error("请填写自评分配比！");
      return;
    }
    if (!WorkloadForm.value.chuLiDuiChuangJianPingFen || WorkloadForm.value.chuLiDuiChuangJianPingFen < 0 || WorkloadForm.value.chuLiDuiChuangJianPingFen > 100) {
      ElMessage.error("请填写对创建人评分(0-100分)！");
      return;
    }
    if (!WorkloadForm.value.chuLiDuiChuangJianPingYu || WorkloadForm.value.chuLiDuiChuangJianPingYu.trim() === '') {
      ElMessage.error("请填写对创建人评语！");
      return;
    }
  } 
  // 评估不通过时的必填验证
  else if (submitData.isNext == 3) {
    if (!WorkloadForm.value.notIsNextMsg || WorkloadForm.value.notIsNextMsg.trim() === '') {
      ElMessage.error("请填写不通过原因！");
      return;
    }
  }

  try {
    // 调用 API 提交数据
    const { data } = await PostAuditWorkloadRequirement(submitData);

    if (data.code === 200) {
      ElMessage.success("审核提交成功");
      dialogAuditWorkloadVisible.value = false;
      closeAuditReportWorkloadRequirement();
      await getList();
    } else {
      ElMessage.error(data.msg || "提交失败，请重试");
    }
  } catch (error) {
    ElMessage.error("提交失败，请检查网络或联系管理员");
    console.error("提交审核失败:", error);
  }
};


// 提交或修改工作量
const handleSubmitWorkloadFormClick = async () => {
  // WorkloadForm.value.itemRequirementMaterialPaths = filePaths.value;
  if (filePaths.value.length !== 0) {
    const workPaths = filePaths.value.map((path: any) => path.resultFilePath)
    WorkloadForm.value.itemRequirementMaterialPaths = workPaths.join('|');
  }

  // 数据验证
  if (
    !WorkloadForm.value.itemRequirementFeedbackDay ||
    !WorkloadForm.value.itemRequirementDeclarationDay ||
    !WorkloadForm.value.itemRequirementPersionDayPrice ||
    !WorkloadForm.value.itemRequirementReferenceCompanyStandards ||
    !WorkloadForm.value.itemRequirementApplicationDescription ||
    !WorkloadForm.value.itemRequirementBossUUID ||
    !WorkloadForm.value.itemRequirementMaterialPaths
  ) {
    ElMessage.error("请填写所有必填项");
    return;
  }

  try {
    WorkloadForm.value.itemRequirementFeedbackDay = String(WorkloadForm.value.itemRequirementFeedbackDay);
    WorkloadForm.value.itemRequirementDeclarationDay = String(WorkloadForm.value.itemRequirementDeclarationDay);
    WorkloadForm.value.itemRequirementPersionDayPrice = String(WorkloadForm.value.itemRequirementPersionDayPrice);


    if (
      WorkloadForm.value.itemWorkloadId !== 0
    ) {
      // 调用接口提交或修改数据
      const { data } = await PostUpdateWorkload(WorkloadForm.value);
      if (data.code === 200) {
        ElMessage.success(isEditMode.value ? '修改成功' : '提交成功');
        dialogWorkloadVisible.value = false; // 关闭弹窗
        closeReportWorkloadRequirement();
        await getList(); // 刷新列表
      } else {
        ElMessage.error(data.msg || '提交失败，请重试');
      }
    } else {
      // 调用接口提交或修改数据
      const { data } = await PostSubmitWorkloadForm(WorkloadForm.value);
      if (data.code === 200) {
        ElMessage.success(isEditMode.value ? '修改成功' : '提交成功');
        dialogWorkloadVisible.value = false; // 关闭弹窗
        closeReportWorkloadRequirement();
        await getList(); // 刷新列表
      } else {
        ElMessage.error(data.msg || '提交失败，请重试');
      }
    }

  } catch (error) {
    ElMessage.error('提交失败，请检查网络或联系管理员');
    console.error('提交工作量表单失败:', error);
  }
};

// 新增方法：查看审核不通过历史记录
const handleNoWorkload = async (id: number) => {
  const confirm = await ElMessageBox.confirm('确认这个需求不需要汇报工作量吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  if (confirm) {
    const { data } = await NoWorkload(id);
    if (data.code === 200 && data.data) {
      await fetchRequirements();
      ElMessage.success(data.msg);
    } else {
      ElMessage.error(data.msg);
    }

  } else {
    return;
  }
};

// 确认选择需求
const confirmRequirementSelection = () => {
  if (selectedRequirement.value) {
    WorkloadForm.value.itemWorkloadName = selectedRequirement.value.requirementName
    WorkloadForm.value.itemRequirementId = selectedRequirement.value.id
    requirementDialogVisible.value = false
  } else {
    ElMessage.warning('请先选择一个需求')
  }
}

// 清空搜索
const clearRequirementSearch = () => {
  requirementSearchQuery.value = ''
}

// 搜索需求
const searchRequirements = () => {
  // 计算属性会自动更新，无需额外操作
}

// 处理人评价相关方法
const openCommentRatingDialog = (row: any) => {
  commentRatingForm.value = {
    itemWorkloadId: row.ID,
    xiangMuDuiChuLi: 100,
    chuangJianDuiChuLiPingFen: 0,
    chuangJianDuiChuLiPingYu: ''
  }
  commentRatingDialogVisible.value = true
}

const closeCommentRatingDialog = () => {
  commentRatingDialogVisible.value = false
  commentRatingForm.value = {
    itemWorkloadId: 0,
    xiangMuDuiChuLi: 100,
    chuangJianDuiChuLiPingFen: 0,
    chuangJianDuiChuLiPingYu: ''
  }
}

const submitCommentRating = async () => {
  // 验证必填项
  if (!commentRatingForm.value.xiangMuDuiChuLi ||
    !commentRatingForm.value.chuangJianDuiChuLiPingFen ||
    !commentRatingForm.value.chuangJianDuiChuLiPingYu) {
    ElMessage.error('请填写所有必填项')
    return
  }

  // 验证评分范围：必须是0-100之间的数字
  if (commentRatingForm.value.chuangJianDuiChuLiPingFen < 0 || commentRatingForm.value.chuangJianDuiChuLiPingFen > 100) {
    ElMessage.error('评分必须是0-100之间的数字')
    return
  }

  try {
    const { data } = await PostCommentRating(commentRatingForm.value)
    if (data.code === 200) {
      ElMessage.success('评价提交成功')
      closeCommentRatingDialog()
      await getList() // 刷新列表
    } else {
      ElMessage.error(data.msg || '评价提交失败')
    }
  } catch (error) {
    ElMessage.error('评价提交失败，请检查网络或联系管理员')
    console.error('提交处理人评价失败:', error)
  }
}

// 计算属性：过滤后的需求列表
const filteredRequirements = computed(() => {
  if (!requirementSearchQuery.value) {
    return requirements.value
  }
  return requirements.value.filter((item: any) =>
    item.requirementName.includes(requirementSearchQuery.value)
  )
})

// 处理需求选择
const selectedRequirement = ref() // 当前选中的需求
const handleRequirementSelect = (currentRow: any) => {
  selectedRequirement.value = currentRow
}

// 需求列表相关方法
// 打开需求列表模态框
const openRequirementListDialog = async () => {
  requirementListDialogVisible.value = true
  await fetchRequirementListData()
}

// 获取需求列表数据
const fetchRequirementListData = async () => {
  requirementListLoading.value = true
  try {
    // 默认传递参数2，点击"全部"时传递1，点击"自己"时传递2
    const type = requirementListFilter.value === 1 ? 1 : 2
    const { data } = await GetWorkloadRequirementList({ type })
    if (data.code === 200) {
      // 接口直接返回数组，本地做一次模糊过滤
      const list = data.data || []
      const kw = (requirementListKeyword.value || '').trim()
      requirementListData.value = kw ? list.filter((it: any) => String(it.requirementName || '').includes(kw)) : list
    } else {
      ElMessage.error(data.msg || '获取需求列表失败')
    }
  } catch (error) {
    console.error('获取需求列表失败:', error)
    ElMessage.error('获取需求列表失败')
  } finally {
    requirementListLoading.value = false
  }
}

// 处理过滤条件变化
const handleRequirementListFilterChange = () => {
  fetchRequirementListData()
}

// 从需求列表点击汇报工作量
const handleReportWorkloadFromList = async (row: any) => {
  // 不关闭需求列表弹框，直接打开汇报工作量弹框并带入名称
  await openReportWorkloadRequirement()
  WorkloadForm.value.itemWorkloadName = row.requirementName
  WorkloadForm.value.itemRequirementId = row.id
}

// 从需求列表点击不汇报工作量
const handleNoWorkloadFromList = async (id: number) => {
  const confirm = await ElMessageBox.confirm('确认这个需求不需要汇报工作量吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  if (confirm) {
    const { data } = await NoWorkload(id);
    if (data.code === 200 && data.data) {
      await fetchRequirementListData(); // 刷新需求列表
      ElMessage.success(data.msg);
    } else {
      ElMessage.error(data.msg);
    }
  } else {
    return;
  }
}


// 关闭弹窗逻辑
const isNext = ref<number>(2); // 默认选择通过
const closeAuditReportWorkloadRequirement = () => {
  dialogAuditWorkloadVisible.value = false;
  isNext.value = 2; // 重置为默认值
  fileList.value = [];
  filePaths.value = [];
  WorkloadForm.value = {
    itemRequirementFeedbackDay: null,
    itemRequirementDeclarationDay: null,
    itemRequirementPersionDayPrice: null,
    itemRequirementReferenceCompanyStandards: "是",
    itemRequirementApplicationDescription: null,
    itemRequirementAuditAfterDay: null,
    itemRequirementDescription: null,
    notIsNextMsg: null,
    itemRequirementMaterialPaths: null,
  };
  loading.value = false;
};


// 定义工作量项类型
interface WorkloadItem {
  id: number
  itemWorkloadName: string
  itemWorkloadCreateUserName: string
  itemRequirementBossName: string
  isPass: number
  createAt: string
  updateTime: string
  itemRequirementDeclarationDay: number
  itemRequirementFeedbackDay: number
  itemRequirementPersionDayPrice: number
  itemRequirementReferenceCompanyStandards: string
}

// 定义用户选项类型
interface UserOption {
  uuid: string
  userName: string
}

// 定义查询参数类型
interface WorkloadQueryParams {
  page: number
  pageSize: number
  createUserName: string
  auditUserName: string
  dateRange?: string[]
  isPass: number
  itemWorkloadName?: string
}

// 状态枚举
enum WorkloadStatus {
  Evaluating = 1, // 评估中
  Approved = 2,   // 评估通过
  Pending = 3     // 待评估
}

// 查询表单引用
const queryForm = ref<FormInstance>()

// 查询参数
const queryParams = reactive<WorkloadQueryParams>({
  page: 1,
  pageSize: 10,
  createUserName: "",
  auditUserName: "",
  dateRange: [],
  isPass: 0,
  itemWorkloadName: "",
})

// 数据状态
const loading = ref(false)
const workloadList = ref<WorkloadItem[]>([])
const total = ref(0)
const activeTab = ref('all')

// 下拉选项
const creatorOptions = ref<UserOption[]>([])
const reviewerOptions = ref<UserOption[]>([])

// 获取状态文本
const getStatusText = (status: number): string => {
  switch (status) {
    case WorkloadStatus.Evaluating:
      return '待评估'
    case WorkloadStatus.Approved:
      return '评估通过'
    case WorkloadStatus.Pending:
      return '评估未通过'
    default:
      return '未知状态'
  }
}

// 获取状态标签类型
const getStatusTagType = (status: number): string => {
  switch (status) {
    case WorkloadStatus.Evaluating:
      return 'warning'
    case WorkloadStatus.Approved:
      return 'success'
    case WorkloadStatus.Pending:
      return 'error'
    default:
      return ''
  }
}

// 获取行样式类名
const getRowClassName = ({ row, rowIndex }: { row: any, rowIndex: number }) => {
  if (rowIndex % 2 === 0) {
    return 'even-row'
  }
  return 'odd-row'
}

// 获取单元格样式
const getCellStyle = ({ row, column, rowIndex, columnIndex }: { row: any, column: any, rowIndex: number, columnIndex: number }) => {
  const baseStyle = {
    padding: '12px 8px',
    fontSize: '14px',
    lineHeight: '1.5'
  }

  // 为不同列添加特殊样式
  if (column.property === 'itemWorkloadName') {
    return { ...baseStyle, fontWeight: '500' }
  }

  if (column.property === 'itemRequirementDeclarationDay' || column.property === 'itemRequirementFeedbackDay') {
    return { ...baseStyle, fontWeight: '600', color: '#667eea' }
  }

  if (column.property === 'itemRequirementPersionDayPrice') {
    return { ...baseStyle, fontWeight: '600', color: '#28a745' }
  }

  return baseStyle
}

// 获取工作量列表
const getList = async (): Promise<void> => {
  try {
    loading.value = true
    const params = {
      ...queryParams,
      // 添加时间处理逻辑
      beginTime: queryParams.dateRange?.[0] ? `${queryParams.dateRange[0]} 00:00:00` : undefined,
      endTime: queryParams.dateRange?.[1] ? `${queryParams.dateRange[1]} 23:59:59` : undefined,
    }
    // 删除dateRange属性，避免传给后端
    delete params.dateRange

    const { data } = await GetWorkloadList(params)
    workloadList.value = data.data.list
    total.value = data.data.total
  } catch (error) {
    ElMessage.error('获取工作量列表失败')
  } finally {
    loading.value = false
  }
}

// 查询
const handleQuery = (): void => {
  queryParams.page = 1
  getList()
}



// Tab切换
const handleTabChange = (tabName: string): void => {
  switch (tabName) {
    case 'all':
      queryParams.isPass = 0
      break
    case 'evaluating':
      queryParams.isPass = WorkloadStatus.Evaluating
      break
    case 'approved':
      queryParams.isPass = WorkloadStatus.Approved
      break
    case 'pending':
      queryParams.isPass = WorkloadStatus.Pending
      break
  }
  handleQuery()
}

// 分页大小变化
const handleSizeChange = (val: number): void => {
  queryParams.pageSize = val
  getList()
}

// 当前页变化
const handleCurrentChange = (val: number): void => {
  queryParams.page = val
  getList()
}

// 下拉选项变化
const handleChange = (): void => {
  getList();
}

// 获取所有用户
const getAllUser = async (): Promise<void> => {
  try {
    const { data } = await GetManagerList()
    if (data.code === 200) {
      creatorOptions.value = data.data
      reviewerOptions.value = data.data
    } else {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    ElMessage.error('获取用户列表失败')
  }
}

// 初始化加载数据
onMounted(() => {
  getList()
  getAllUser()
})
</script>

<style lang="scss" scoped>
.workload-list-container {
  padding: 16px;
  height: calc(100vh - 120px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden;

  .full-width-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;

    :deep(.el-card__body) {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 16px;
      overflow: hidden;
    }

    :deep(.el-card__header) {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 16px 16px 0 0;
      padding: 16px 20px;
      border: none;
      flex-shrink: 0;
    }
  }

  .query-form {
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16px 16px 0 0;
    }

    .query-form-content {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: start;

      .query-fields {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        align-items: end;

        .query-item {
          margin-bottom: 0;

          :deep(.el-form-item__label) {
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
            display: block;
            position: relative;
            padding-left: 12px;

            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 4px;
              height: 16px;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border-radius: 2px;
            }
          }

          :deep(.el-form-item__content) {
            line-height: 1;
          }

          .query-input {
            width: 100%;
            transition: all 0.3s ease;

            :deep(.el-input__wrapper) {
              border-radius: 10px;
              border: 2px solid #e9ecef;
              background: rgba(255, 255, 255, 0.8);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
              transition: all 0.3s ease;

              &:hover {
                border-color: #667eea;
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
                transform: translateY(-1px);
              }

              &.is-focus {
                border-color: #667eea;
                box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
                transform: translateY(-2px);
              }
            }

            :deep(.el-input__inner) {
              font-size: 14px;
              color: #2c3e50;
              font-weight: 500;

              &::placeholder {
                color: #9ca3af;
                font-weight: 400;
              }
            }
          }

          .date-picker {
            :deep(.el-range-editor) {
              border-radius: 10px;
              border: 2px solid #e9ecef;
              background: rgba(255, 255, 255, 0.8);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
              transition: all 0.3s ease;

              &:hover {
                border-color: #667eea;
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
                transform: translateY(-1px);
              }

              &.is-active {
                border-color: #667eea;
                box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
                transform: translateY(-2px);
              }
            }
          }


        }
      }

      .action-buttons {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        flex-wrap: nowrap;
        align-items: flex-start;

        .action-btn {
          border-radius: 12px;
          font-weight: 600;
          font-size: 14px;
          padding: 12px 20px;
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          border: none;
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
          }

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

            &::before {
              left: 100%;
            }
          }

          .el-icon {
            margin-right: 8px;
            font-size: 16px;
          }

          &.primary-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;

            &:hover {
              background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
            }
          }

          &.info-btn {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;

            &:hover {
              background: linear-gradient(135deg, #43a3f5 0%, #00e6f2 100%);
            }
          }

          &.success-btn {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: white;

            &:hover {
              background: linear-gradient(135deg, #3dd870 0%, #32e6c4 100%);
            }
          }
        }
      }
    }
  }

  .full-width-tabs {
    margin-bottom: 16px;
    flex-shrink: 0;

    :deep(.el-tabs__header) {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      padding: 0 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    :deep(.el-tabs__item) {
      font-weight: 600;
      color: #606266;
      transition: all 0.3s ease;

      &.is-active {
        color: #667eea;
        transform: translateY(-2px);
      }

      &:hover {
        color: #667eea;
        transform: translateY(-1px);
      }
    }

    :deep(.el-tabs__active-bar) {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      height: 3px;
      border-radius: 2px;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 16px;
    margin-bottom: 16px;
    min-height: 0;
  }

  .pagination-container {
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
}

// 全局滚动条样式
:global(::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:global(::-webkit-scrollbar-thumb) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;

  &:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  }
}

:global(::-webkit-scrollbar-track) {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

:deep(.el-table .unit-header .cell::after) {
  content: "(人/天)";
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 4px;
}

// 增强表格样式
.enhanced-table {
  :deep(.el-table) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    height: 100%;

    // 设置表格行高
    .el-table__row {
      height: 50px !important;
    }

    .el-table__cell {
      padding: 8px 0 !important;
    }

    .el-table__header-wrapper {
      .el-table__header {
        th {
          background: #f8f9fa !important;
          color: #606266 !important;
          font-weight: 500;
          border: 1px solid #ebeef5;
          padding: 8px 8px;
          height: 50px !important;

          .cell {
            color: #606266 !important;
            font-weight: 500;
            font-size: 14px;
            line-height: 34px;
          }
        }
      }
    }

    .el-table__body-wrapper {
      overflow-y: auto;
      max-height: calc(100vh - 320px);

      .el-table__row {
        transition: all 0.3s ease;
        height: 50px !important;

        &.even-row {
          background: #ffffff;
        }

        &.odd-row {
          background: #fafbfc;
        }

        &:hover {
          background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
          transform: translateY(-2px);
          box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
        }

        td {
          border-bottom: 1px solid #f0f0f0;
          transition: all 0.3s ease;
          padding: 8px 0 !important;
          height: 50px !important;
        }
      }
    }
  }
}

// 表格列样式
.task-name-column {
  .task-name-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 50px;

    .task-icon {
      color: #667eea;
      font-size: 15px;
      flex-shrink: 0;
    }

    .task-text {
      color: #2c3e50;
      font-weight: 500;
      line-height: 1.3;
      font-size: 13px;
    }
  }
}

.days-column {
  .days-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 50px;

    .days-number {
      font-size: 16px;
      font-weight: 600;
      color: #667eea;
      line-height: 1.2;
    }

    .days-unit {
      font-size: 11px;
      color: #909399;
      font-weight: 500;
      line-height: 1.2;
    }
  }
}

.price-column {
  .price-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 50px;

    .price-symbol {
      font-size: 11px;
      color: #28a745;
      font-weight: 600;
    }

    .price-number {
      font-size: 15px;
      font-weight: 600;
      color: #28a745;
    }

    .price-unit {
      font-size: 11px;
      color: #909399;
      font-weight: 500;
    }
  }
}

.standard-column {
  .standard-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;

    .standard-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 12px;

      .tag-icon {
        font-size: 11px;
      }
    }
  }
}

.user-column {
  .user-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;

    .user-avatar {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-weight: 600;
      font-size: 11px;
    }

    .user-name {
      color: #2c3e50;
      font-weight: 500;
      font-size: 12px;
    }
  }
}

.status-column {
  .status-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;

    .status-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 12px;

      .status-icon {
        font-size: 11px;
      }
    }
  }
}

.time-column {
  .time-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 50px;

    .time-icon {
      color: #909399;
      font-size: 13px;
    }

    .time-text {
      color: #606266;
      font-size: 12px;
      font-weight: 500;
    }
  }
}

.action-column {
  .action-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    justify-content: center;
    align-items: center;
    height: 50px;
    overflow: hidden;
    min-width: 0;
    width: 100%;

    .action-btn {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      min-width: 0;
      flex-shrink: 0;
      height: 24px;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      }

      .el-icon {
        font-size: 9px;
      }

      &.detail-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;

        &:hover {
          background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }
      }

      &.edit-btn {
        background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
        border: none;
        color: white;

        &:hover {
          background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
        }
      }

      &.audit-btn {
        background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
        border: none;
        color: white;

        &:hover {
          background: linear-gradient(135deg, #43a047 0%, #4caf50 100%);
        }
      }

      &.history-btn {
        background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
        border: none;
        color: white;

        &:hover {
          background: linear-gradient(135deg, #8e24aa 0%, #9c27b0 100%);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .query-form {
    .query-form-content {
      // 保持同一行显示
      grid-template-columns: 1fr auto;

      .query-fields {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
      }

      .action-buttons {
        justify-content: center;

        .action-btn {
          padding: 10px 16px;
          font-size: 13px;
        }
      }
    }
  }
}

@media (max-width: 900px) {
  .query-form {
    .query-form-content {
      // 垂直堆叠到两块：过滤条件在上，按钮在下
      grid-template-columns: 1fr;

      .query-fields {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
      }

      .action-buttons {
        justify-content: center;
        gap: 10px;

        .action-btn {
          padding: 10px 14px;
          font-size: 13px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .query-form {
    padding: 16px;

    .query-form-content {
      // 移动端单列
      grid-template-columns: 1fr;

      .query-fields {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .action-buttons {
        flex-direction: column;
        gap: 8px;

        .action-btn {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
}

// 添加一些额外的动画效果
.query-form {
  animation: slideInDown 0.6s ease-out;

  .query-form-content {
    .query-fields {
      .query-item {
        animation: fadeInUp 0.4s ease-out;
        animation-fill-mode: both;

        &:nth-child(1) {
          animation-delay: 0.1s;
        }

        &:nth-child(2) {
          animation-delay: 0.2s;
        }

        &:nth-child(3) {
          animation-delay: 0.3s;
        }

        &:nth-child(4) {
          animation-delay: 0.4s;
        }

        &:nth-child(5) {
          animation-delay: 0.5s;
        }
      }
    }

    .action-buttons {
      animation: fadeInUp 0.6s ease-out;
      animation-delay: 0.3s;
      animation-fill-mode: both;
    }
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 详情模态框样式
.detail-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 24px 32px;
      margin: 0;

      .el-dialog__title {
        color: white;
        font-size: 20px;
        font-weight: 600;
      }

      .el-dialog__headerbtn {
        .el-dialog__close {
          color: white;
          font-size: 20px;

          &:hover {
            color: #f0f0f0;
          }
        }
      }
    }

    .el-dialog__body {
      padding: 32px;
      max-height: 70vh;
      overflow-y: auto;
    }

    .el-dialog__footer {
      padding: 20px 32px;
      background: #f8f9fa;
      border-top: 1px solid #e9ecef;
    }
  }
}

.detail-container {
  .detail-section {
    margin-bottom: 32px;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;

    &:last-child {
      margin-bottom: 0;
    }

    .detail-section-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid #f0f0f0;

      .section-icon {
        color: #667eea;
        margin-right: 12px;
      }

      .detail-section-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        display: flex;
        align-items: center;
      }
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;

      .detail-item {
        display: flex;
        align-items: flex-start;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;

        &:hover {
          background: #e9ecef;
          transform: translateY(-2px);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        &.full-width {
          grid-column: 1 / -1;
          flex-direction: column;
          align-items: stretch;

          .detail-label {
            margin-bottom: 12px;
            font-weight: 600;
          }
        }

        .detail-label {
          font-weight: 500;
          color: #6c757d;
          min-width: 140px;
          margin-right: 16px;
          white-space: nowrap;
        }

        .detail-value {
          color: #2c3e50;
          font-weight: 500;
          flex: 1;

          &.highlight-value {
            color: #667eea;
            font-weight: 600;
            font-size: 16px;
          }

          &.success-value {
            color: #28a745;
            font-weight: 600;
            font-size: 16px;
          }
        }
      }
    }

    .detail-content-box {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 16px;
      margin-top: 8px;

      &.error-box {
        background: #fff5f5;
        border-color: #fed7d7;

        .content-text {
          color: #e53e3e;
        }
      }

      .content-text {
        color: #2c3e50;
        line-height: 1.6;
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
      }
    }
  }

  .file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;

    .file-item {
      display: flex;
      align-items: center;
      padding: 16px;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #e9ecef;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border-color: #667eea;
      }

      .file-icon {
        color: #667eea;
        margin-right: 12px;
      }

      .file-name {
        flex: 1;
        color: #2c3e50;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .download-icon {
        color: #6c757d;
        margin-left: 8px;
        opacity: 0.7;
        transition: opacity 0.3s ease;
      }

      &:hover .download-icon {
        opacity: 1;
        color: #667eea;
      }
    }
  }

  .empty-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    color: #6c757d;

    .empty-icon {
      color: #adb5bd;
      margin-bottom: 16px;
    }

    .empty-text {
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.detail-footer {
  display: flex;
  justify-content: center;

  .close-btn {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    }

    .el-icon {
      margin-right: 8px;
    }
  }
}

// 新增汇报工作量模态框样式
.edit-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 16px 24px;
      margin: 0;

      .el-dialog__title {
        color: white;
        font-size: 18px;
        font-weight: 600;
      }

      .el-dialog__headerbtn {
        .el-dialog__close {
          color: white;
          font-size: 18px;

          &:hover {
            color: #f0f0f0;
          }
        }
      }
    }

    .el-dialog__body {
      padding: 20px;
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}

.edit-form {
  .form-section {
    margin-bottom: 16px;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;

    &:last-child {
      margin-bottom: 0;
    }

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;

      .section-icon {
        color: #667eea;
        margin-right: 10px;
      }

      .section-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        display: flex;
        align-items: center;
      }
    }
  }

  .form-row {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    .form-item {
      margin-bottom: 0;

      :deep(.el-form-item__label) {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 6px;
        font-size: 13px;
      }

      :deep(.el-form-item__content) {
        line-height: 1;
      }
    }
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;

    .form-row {
      margin-bottom: 0;
    }
  }

  .task-name-input {
    display: flex;
    gap: 12px;
    align-items: flex-start;

    .task-input {
      flex: 1;
      min-width: 400px;

      :deep(.el-input__wrapper) {
        height: 36px;
      }
    }

    .select-btn {
      border-radius: 6px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      min-width: 100px;
      height: 36px;
      font-size: 12px;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
      }

      .el-icon {
        margin-right: 4px;
      }
    }
  }

  .full-width-select,
  .full-width-input,
  .full-width-textarea {
    width: 100%;
  }

  .switch-container {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .switch-wrapper {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 16px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 10px;
      border: 2px solid #e9ecef;
      transition: all 0.3s ease;

      &:hover {
        border-color: #667eea;
        box-shadow: 0 2px 12px rgba(102, 126, 234, 0.1);
      }

      .custom-switch {
        :deep(.el-switch__core) {
          border-radius: 20px;
          background: #dcdfe6;
          border: 2px solid #c0c4cc;
          transition: all 0.3s ease;

          &.is-checked {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #667eea;
            box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);
          }

          &:hover {
            transform: scale(1.02);
          }
        }

        :deep(.el-switch__label) {
          font-weight: 600;
          color: #606266;
          font-size: 12px;
        }
      }

      .switch-status {
        .status-text {
          padding: 4px 12px;
          border-radius: 16px;
          font-size: 12px;
          font-weight: 600;
          background: #f0f0f0;
          color: #909399;
          transition: all 0.3s ease;

          &.active {
            background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
            color: white;
            box-shadow: 0 2px 6px rgba(82, 196, 26, 0.3);
          }
        }
      }
    }

    .switch-description {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 16px;
      background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%);
      border-radius: 8px;
      border: 1px solid #d1e7ff;

      .info-icon {
        color: #1890ff;
        font-size: 16px;
        margin-top: 1px;
        flex-shrink: 0;
      }

      .description-text {
        color: #1890ff;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 500;
      }
    }
  }

  .upload-area {
    :deep(.el-upload) {
      width: 100%;
    }

    :deep(.el-upload-dragger) {
      width: 100%;
      height: 100px;
      border: 2px dashed #d9d9d9;
      border-radius: 10px;
      background: #fafafa;
      transition: all 0.3s ease;

      &:hover {
        border-color: #667eea;
        background: #f0f7ff;
      }
    }
  }

  .upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .upload-icon {
      color: #667eea;
      margin-bottom: 8px;
    }

    .upload-text {
      text-align: center;

      .upload-title {
        margin: 0 0 6px 0;
        font-size: 14px;
        font-weight: 600;
        color: #2c3e50;
      }

      .upload-hint {
        margin: 0;
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .upload-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    background: #f0f7ff;
    border: 1px solid #d1e7ff;
    border-radius: 5px;
    color: #667eea;
    font-size: 12px;

    .el-icon {
      color: #667eea;
    }
  }

  .form-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;

    .cancel-btn,
    .submit-btn {
      padding: 10px 24px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 6px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .el-icon {
        margin-right: 6px;
      }
    }

    .cancel-btn {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      color: #6c757d;

      &:hover {
        background: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
      }
    }

    .submit-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      color: white;

      &:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
      }
    }
  }
}

// 需求列表模态框样式
.requirement-list-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 24px 32px;
      margin: 0;

      .el-dialog__title {
        color: white;
        font-size: 20px;
        font-weight: 600;
      }

      .el-dialog__headerbtn {
        .el-dialog__close {
          color: white;
          font-size: 20px;

          &:hover {
            color: #f0f0f0;
          }
        }
      }
    }

    .el-dialog__body {
      padding: 24px;
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}

.requirement-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

  .el-radio-group {
    display: flex;
    gap: 16px;

    .el-radio {
      margin-right: 0;

      :deep(.el-radio__label) {
        font-weight: 600;
        color: #606266;
        font-size: 14px;
      }

      :deep(.el-radio__input.is-checked + .el-radio__label) {
        color: #667eea;
        font-weight: 700;
      }

      :deep(.el-radio__input.is-checked .el-radio__inner) {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: #667eea;
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);
      }

      &:hover {
        :deep(.el-radio__inner) {
          border-color: #667eea;
          transform: scale(1.05);
        }
      }
    }
  }

  .toolbar-search {
    flex: 1;
    max-width: 400px;

    :deep(.el-input__wrapper) {
      border-radius: 8px;
      border: 2px solid #e9ecef;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      &:hover {
        border-color: #667eea;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
      }

      &.is-focus {
        border-color: #667eea;
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
      }
    }

    :deep(.el-input__inner) {
      font-weight: 500;
      color: #2c3e50;

      &::placeholder {
        color: #909399;
        font-weight: 400;
      }
    }
  }
}

.requirement-table {
  :deep(.el-table) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;

    .el-table__header-wrapper {
      .el-table__header {
        th {
          background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
          color: #2c3e50;
          font-weight: 600;
          border: 1px solid #e9ecef;
          padding: 16px 12px;

          .cell {
            color: #2c3e50;
            font-weight: 600;
            font-size: 14px;
          }
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__row {
        transition: all 0.3s ease;

        &:hover {
          background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
          transform: translateY(-1px);
          box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
        }

        td {
          border-bottom: 1px solid #f0f0f0;
          padding: 16px 12px;
          transition: all 0.3s ease;
        }
      }
    }
  }
}

.op-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;

  .el-button {
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    &.el-button--primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
      }
    }

    &.el-button--danger {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #ff5252 0%, #d32f2f 100%);
      }
    }
  }
}

// 审核需求汇报工作量弹框样式
.audit-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px 28px;
      margin: 0;

      .el-dialog__title {
        color: white;
        font-size: 18px;
        font-weight: 600;
      }

      .el-dialog__headerbtn {
        .el-dialog__close {
          color: white;
          font-size: 18px;

          &:hover {
            color: #f0f0f0;
            transform: scale(1.1);
          }
        }
      }
    }

    .el-dialog__body {
      padding: 24px;
      max-height: 70vh;
      overflow-y: auto;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
  }
}

.audit-form {
  .audit-form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .audit-form-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      align-items: start;

      &.full-width {
        grid-column: 1 / -1;
      }

              .audit-form-item {
          margin-bottom: 0;

          :deep(.el-form-item__label) {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 13px;
            display: block;
            
            &::before {
              content: '';
              margin-right: 4px;
            }
            
            &.is-required::before {
              content: '*';
              color: #f56c6c;
              margin-right: 4px;
            }
          }

        :deep(.el-form-item__content) {
          line-height: 1;
        }

        :deep(.el-input-number) {
          width: 100%;

          .el-input__wrapper {
            border-radius: 8px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

            &:hover {
              border-color: #667eea;
              box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
            }

            &.is-focus {
              border-color: #667eea;
              box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
            }
          }
        }

        :deep(.el-switch) {
          .el-switch__core {
            border-radius: 20px;
            background: #dcdfe6;
            border: 2px solid #c0c4cc;
            transition: all 0.3s ease;

            &.is-checked {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border-color: #667eea;
              box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);
            }

            &:hover {
              transform: scale(1.02);
            }
          }

          .el-switch__label {
            font-weight: 600;
            color: #606266;
            font-size: 12px;
          }
        }

        :deep(.el-textarea) {
          .el-textarea__inner {
            border-radius: 8px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            font-size: 13px;
            line-height: 1.5;

            &:hover {
              border-color: #667eea;
              box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
            }

            &:focus {
              border-color: #667eea;
              box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
            }

            &::placeholder {
              color: #909399;
              font-weight: 400;
            }
          }
        }

        .file-list {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 12px;

          .file-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #e9ecef;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
              transform: translateY(-2px);
              box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
              border-color: #667eea;
            }

            .file-icon {
              color: #667eea;
              margin-right: 10px;
              font-size: 16px;
            }

            .file-name {
              flex: 1;
              color: #2c3e50;
              font-weight: 500;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }

    .audit-radio-group {
      display: flex;
      gap: 20px;

      .audit-radio {
        margin-right: 0;

        :deep(.el-radio__label) {
          font-weight: 600;
          color: #606266;
          font-size: 14px;
        }

        :deep(.el-radio__input.is-checked + .el-radio__label) {
          color: #667eea;
          font-weight: 700;
        }

        :deep(.el-radio__input.is-checked .el-radio__inner) {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-color: #667eea;
          box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);
        }

        &:hover {
          :deep(.el-radio__inner) {
            border-color: #667eea;
            transform: scale(1.05);
          }
        }
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;

    .el-button {
      padding: 10px 28px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      }

      &.el-button--default {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        color: #6c757d;

        &:hover {
          background: #e9ecef;
          border-color: #adb5bd;
          color: #495057;
        }
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;

        &:hover {
          background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }
      }
    }
  }
}

// 处理人评价模态框样式
.comment-rating-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px 28px;
      margin: 0;

      .el-dialog__title {
        color: white;
        font-size: 18px;
        font-weight: 600;
      }

      .el-dialog__headerbtn {
        .el-dialog__close {
          color: white;
          font-size: 18px;

          &:hover {
            color: #f0f0f0;
            transform: scale(1.1);
          }
        }
      }
    }

    .el-dialog__body {
      padding: 24px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
  }
}

.comment-rating-form {
  .form-section {
    .section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid #f0f0f0;

      .section-icon {
        color: #667eea;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .section-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
      }
    }

    .form-grid {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .form-row {
        .form-item {
          margin-bottom: 0;

          :deep(.el-form-item__label) {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 13px;
            display: block;
          }

          :deep(.el-form-item__content) {
            line-height: 1;
          }

          :deep(.el-input-number) {
            width: 100%;

            .el-input__wrapper {
              border-radius: 8px;
              border: 2px solid #e9ecef;
              transition: all 0.3s ease;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

              &:hover {
                border-color: #667eea;
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
              }

              &.is-focus {
                border-color: #667eea;
                box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
              }
            }
          }

          :deep(.el-textarea) {
            .el-textarea__inner {
              border-radius: 8px;
              border: 2px solid #e9ecef;
              transition: all 0.3s ease;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
              font-size: 14px;
              line-height: 1.6;

              &:hover {
                border-color: #667eea;
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
              }

              &:focus {
                border-color: #667eea;
                box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
              }
            }
          }
        }
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;

    .el-button {
      padding: 10px 28px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      }

      &.el-button--default {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        color: #6c757d;

        &:hover {
          background: #e9ecef;
          border-color: #adb5bd;
          color: #495057;
        }
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;

        &:hover {
          background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }
      }
    }
  }
}
</style>